import React from 'react'
import {connect} from 'react-redux'
import {HeaderWraper, HeaderBottom, HeaderUp} from "./styled";
import {Row, Col} from 'antd'
import {actionFunc} from './store/index'

class Header extends React.Component {
    render() {
        const {currTime, weatherPicUrl, weatherInfo} = this.props
        return (
            <HeaderWraper>
                <HeaderUp>
                    Hello, Admin
                </HeaderUp>
                <HeaderBottom>
                    <Row>
                        <Col span={4} className="bread">首页</Col>
                        <Col span={20} className="weather">
                            {currTime}
                            <img src={weatherPicUrl} alt=""/>
                            <span>{weatherInfo}</span>
                        </Col>
                    </Row>
                </HeaderBottom>
            </HeaderWraper>
        )
    }

    componentDidMount() {
        setInterval(this.props.realTimeDisplay, 1000)
        this.props.getWeathInfo()
    }
}

const mapState = (state) => ({
    currTime: state.getIn(['header', 'currTime']),
    weatherInfo: state.getIn(['header','weatherInfo']),
    weatherPicUrl: state.getIn(['header','weatherPicUrl']),

})
const mapDispatch = (dispatch) => ({
    realTimeDisplay() {
        dispatch(actionFunc.getCurrTime())
    },
    getWeathInfo(){
        dispatch(actionFunc.getWeatherInfo())
    }

})

export default connect(mapState, mapDispatch)(Header)
